<script>
import moduleCard from '@/components/business/module-card/index.vue'
import UForm from "../../../../../uni_modules/uview-ui/components/u-form/u-form.vue";
import FixedFooter from "../../../../../components/business/fixed-footer/index.vue";
import UButton from "../../../../../uni_modules/uview-ui/components/u-button/u-button.vue";
import UFormItem from "../../../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import uSelect from "../../../../../components/base/u-select/index.vue";
import uniNumberBox from "../../../../../uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue";
import {getUsedMaterialListApi, usedMaterialOtherAtherApi} from "../../../../../api/common/power-station";
export default {
  name: "index",
  components: {uSelect, UFormItem, UButton, FixedFooter, UForm, uniNumberBox, moduleCard},
  data() {
    return {
      // formData: {
      //   amount: 0,
      //   barcode:"",
      //   code: "",
      //   createTime: "",
      //   entryId: "",
      //   id: "",
      //   materialId: "",
      //   name: "",
      //   oldFlag: null,
      //   planId: null,
      //   sort: 0,
      //   spec: null,
      //   status: null,
      //   type: '',
      //   unit: '',
      // },
      showInstall: false,
      entryId: '',
      type: '',
      warehouseId: '',
      materialList: [],
      rules: {
        field: [
          {required: true, message: '请输入并网箱数量', trigger: 'blur'},
          {pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur'}
        ]
      }
    }
  },
  onLoad(options) {
    this.entryId = options.entryId;
    this.type = options.type;
    this.warehouseId = options.warehouseId;
    this.getUsedMaterialList();
  },
  methods: {
    async getUsedMaterialList(){
      const { data } = await getUsedMaterialListApi({
        entryId: this.entryId,
        type: this.type,
        warehouseId: this.warehouseId,
      })
      this.materialList = data.map(item => {
        return {
          ...item,
          checked: false,
          amount: 0,
        }
      });
    },
    async submit() {
      // 二次确认
      await uni.showModal({
        title: '提示',
        content: '确定提交？',
        confirmText: '确定',
        cancelText: '取消'
      })
      const chekedList = this.materialList.filter(item => item.checked);
      if (chekedList.length === 0) {
        await uni.showToast({
          title: '请选择物料',
          icon: 'none',
          duration: 2000
        })
        return;
      }
      await usedMaterialOtherAtherApi({
        entryId: this.entryId,
        materialList:chekedList.map(item => {
          return {
            num: item.amount,
            materialId: item.id,
            spec: item.spec,
          }
        }),
        warehouseId: this.warehouseId,
      });
      // 提示提交成功
      await uni.showToast({
        title: '提交成功',
        icon: 'success',
        duration: 2000
      })
      // 返回上一页
      uni.navigateBack({
        delta: 1
      })
    },
    check(material) {
      material.checked = !material.checked;
    },
    back() {
      uni.navigateBack({
        delta: 1
      })
    },
  },
}
</script>

<template>
<view class="add">
  <module-card :title="material.name" v-for="(material, index) in materialList" :key="index">
    {{material.checked ? '已选中' : '未选中'}}
    <u-button @click="check(material)">选择 临时按钮</u-button>
    <view :class="material.checked ? 'active' : ''">
      <u-form
          labelPosition="left"
          :model="material"
          ref="uForm"
          labelWidth="100"
          :labelStyle="{'align-self': 'start', 'font-size': '14px'}"
      >
        <u-form-item
            label="物料号"
            borderBottom
            ref="item1"
        >
          <u-input
              v-model="material.code"
              placeholder="暂无"
              border="none"
              disabled
              disabled-color="#fff"
          >
          </u-input>
        </u-form-item>
        <u-form-item
            label="物料名称"
            borderBottom
            ref="item1"
        >
          <u-input
              v-model="material.name"
              disabledColor="#ffffff"
              placeholder="暂无"
              border="none"
              disabled
              disabled-color="#fff"
          >
          </u-input>
        </u-form-item>
        <u-form-item
            label="物料规格"
            prop="userInfo.sex"
            borderBottom
            ref="item1"
        >
          <u-input
              v-model="material.spec"
              placeholder="暂无"
              border="none"
              disabled
              disabled-color="#fff"
          >
          </u-input>
        </u-form-item>
        <u-form-item
            label="物料条码"
            prop="userInfo.sex"
            borderBottom
            ref="item1"
        >
          <u-input
              v-model="material.barcode"
              placeholder="暂无"
              border="none"
              disabled
              disabled-color="#fff"
          >
          </u-input>
        </u-form-item>
        <u-form-item
            label="使用数量"
            prop="userInfo.sex"
            borderBottom
            ref="item1"
        >
          <u-number-box v-model="material.amount"></u-number-box>
        </u-form-item>
      </u-form>
    </view>
  </module-card>
  <view class="empty">
    <u-empty
        v-if="materialList.length === 0"
        mode="list"
        icon="http://cdn.uviewui.com/uview/empty/list.png"
    >
    </u-empty>
  </view>
  <fixed-footer>
    <u-button
        v-if="materialList.length === 0"
        type="primary"
        class="footer-btn"
        color="#dab386"
        @click="back"
    >返回</u-button>
    <u-button
        v-else
        type="primary"
        class="footer-btn"
        color="#dab386"
        @click="submit"
    >提交</u-button>
  </fixed-footer>
</view>
</template>

<style scoped lang="scss">
.add{
  position: relative;
  min-height: 100vh;
}
.active {
  //background-color: #eee;
}
.empty{
  position: relative;
  margin-top: 100px;
}
</style>
